import React, { useContext } from 'react'
import styles from './index.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
import { Context } from '../../App'
import classnames from 'classnames'

export default function Counter({ meal, className }) {
    const {addCart, subCart} = useContext(Context)
    
    const minusHandler = (meal) => {
        subCart(meal)
    }
    
    const plusHandler = (meal) => {
        addCart(meal)
    }

	return (
		<div className={classnames(styles.root, className)}>
			<div className="right">
				{meal.amount && meal.amount !== 0 ? (
					<>
						<button className="minus" onClick={() => {minusHandler(meal)}}>
							<FontAwesomeIcon icon={faMinus} />
						</button>
						<span className="amount">{meal.amount}</span>
					</>
				) : null}
			</div>

			<button className="plus" onClick={() => {plusHandler(meal)}}>
				<FontAwesomeIcon icon={faPlus} />
			</button>
		</div>
	)
}
